<template>
  <div class="page login-page">
    <img class="bg" src="//img.dmallcdn.com//dshop/201912/13b7b397-1d7b-4fda-80df-1c4030410765" />
    <md-form :mode="loginForm" class="form-box">
      <md-form-item type="text" placeholder="请输入您的手机号" v-model="loginForm.phone">
        <md-button
          type="primary"
          class="msg-btn"
          plain
          inline
          disabled
          v-if="endTime"
        >{{time}}秒后重新获取</md-button>
        <md-button
          v-else
          type="primary"
          class="msg-btn"
          plain
          inline
          :disabled='isDisabled'
          @click="sendMessageCode"
        >获取验证码</md-button>
      </md-form-item>
      <md-form-item type="text" v-model="loginForm.msg_code" placeholder="请输入您的验证码" />
    </md-form>
    <p class="tip">
      验证手机视为已阅读并同意<br />
      <a href="javascript:;">《超市用户协议》</a>
      <a href="javascript:;">《超市隐私政策》</a>
    </p>
    <md-button class="submit-btn" type="primary" @click="loginDo">登录</md-button>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      endTime: false,
      time: 0,
      loginForm: {
        phone: '',
        msg_code: ''
      }
    }
  },
  computed: {
    isDisabled () {
      const reg = /^1[3456789]\d{9}$/
      console.log(reg.test(this.loginForm.phone))
      return !reg.test(this.loginForm.phone)
    }
  },
  methods: {
    sendMessageCode () {
      this.startEndTime()
      this.$api.user.message_code({
        phone: this.loginForm.phone
      }).then((res) => {
        console.log(res)
      })
    },

    startEndTime () {
      this.endTime = true
      this.time = 10
      this.inerval = setInterval(() => {
        this.time -= 1
        if (this.time <= 0) {
          this.endTime = false
          clearInterval(this.inerval)
        }
      }, 1000)
    },

    loginDo () {
      this.$store.dispatch('user/loginDo', this.loginForm).then((res) => {
        const path = this.$route.query.callbackUrl || '/home'
        this.$router.replace(path)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  background: #f6f6f6;
  .bg {
    @include wh(100%, auto);
    display: block;
  }
  .form-box {
    margin-top: 40px;
  }
  .tip {
    line-height: 1.5;
    font-size: $font-size-s;
    color: $text-default-color;
    text-align: right;
    margin: 20px 0;
    a {
      color: $base-color;
    }
  }
  .submit-btn {
    width: 90%;
    margin: 0 auto;
    margin-top: 40px;
  }
  .msg-btn {
    flex-shrink: 0;
  }
}
</style>
